<template>
  <div>
    <el-card>
      <el-row>
        <el-col type="flex" :span="12">
          <el-button type="primary" @click="addfrom">添加客户</el-button>
        </el-col>
        <el-col type="flex" :span="4" class="Albrokers">
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col type="flex" :span="4">
          <el-input v-model="inputdata" type="text" autocomplete="off" />
        </el-col>
        <el-col type="flex" :span="2">
          <el-button @click="filtrate">筛选</el-button>
        </el-col>
      </el-row>
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template v-slot="{row}">
              <img
                :src="row.image"
                alt=""
                width="100%"
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
          />
          <el-table-column
            prop="phone"
            label="电话"
            width="180"
          />
          <el-table-column
            prop="agent.name"
            label="经济"
            width="180"
          />
          <el-table-column
            prop="wechat"
            label="微信"
            width="200"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            width="200"
          />
          <el-table-column
            label="操作"
            width="330"
          >
            <template v-slot="{row}">
              <el-button type="primary" @click="edit(row.id)">编辑</el-button>
              <el-button type="success" @click="removedate(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :page-size="size"
          :pager-count="11"
          layout="prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
      </el-row>
    </el-card>

    <Add ref="addfrom" :show-dialog.sync="showDialog" @transcation="getInFromdata" />
  </div>
</template>

<script>
import Add from '@/views/clientManagement/comments/index.vue'

import { getInFrom, getuser, remove, getassign, getdataNumber, getagents } from '@/api/clientManagement'
export default {
  components: { Add },
  data() {
    return {
      showDialog: false,
      tableData: [],
      inputdata: '',
      size: 4,
      start: 0,
      total: 0,
      options: [],
      value: ''
    }
  },
  created() {
    this.getInFromdata()
    this.getuserdata()
  },
  methods: {
    // 获取全部数据,筛选数据
    async  getInFromdata() {
      const data = await getagents()
      // console.log(data.data)
      this.options = data.data
      const res = await getInFrom({ _limit: this.size, _start: this.start })
      const res1 = await getdataNumber()
      console.log(data)
      // data.data.forEach(item => {
      //   this.options = item.agent.name
      //   // console.log(item.agent)
      // })
      this.tableData = res.data
      this.total = res1.data
    },
    addfrom() {
      // console.log(123)
      this.showDialog = true
      this.$refs.addfrom.formdata = {
        agent: '', // id 值
        name: '', // 姓名
        email: '', // 电子邮箱
        phone: '', // 手机号
        wechat: '', // 微信
        desc: '', // 测试用户
        image: ''
      }
      // console.log(this.$refs.addfrom.formdata)
    },
    // 数据回填
    async getuserdata() {
      const res = await getuser()
      this.$refs.addfrom.userInfo = res.data
      // console.log(this.$refs.addfrom.userInfo.image)
      // console.log(res)
    },
    // 删除客户
    async removedate(id) {
      console.log(id)
      const res = await remove(id)
      this.getInFromdata()
      console.log(res)
    },
    // 根据id查询客户
    async edit(id) {
      const res = await getassign(id)
      this.showDialog = true
      this.$refs.addfrom.formdata = res.data
      console.log(res)
    },
    //, 模糊搜索
    async filtrate() {
      const res = await getInFrom({ _limit: this.size, _start: this.start, name_contains: this.inputdata })
      this.tableData = res.data
      this.inputdata = ''
      // const date = res.data.filter(item => {
      //   return console.log(item.name.indexOf(this.inputdata) !== -1)
      // })
      // this.tableData=res.data
      console.log(res)
    },
    // 分页器
    changePage(newPage) {
      console.log(newPage)
      this.start = this.start = newPage === 1 ? 0 : (newPage - 1) * this.size
      this.getInFromdata()
    }
  }
}
</script>
<style lang="scss" scoped>
.Albrokers{
  // padding-right: 10px;
  margin-right: 50px;
  background-color: #fff;
  color: #000;
  }
</style>

